<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="banner">
			<swiper :indicator-dots="true" indicator-active-color="#d44439" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) in list" :key="index">
					<image :src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 推荐歌单 -->
		<h1 class="title">推荐歌单</h1>

		<!-- 推荐歌单的数据 -->
		<praCard :list="PersonalizedList"></praCard>
	</view>
	</view>
</template>

<script>
	import {
		getBanner,
		getPersonalized
	} from "../../api/index.js"
	import praCard from '../../components/praCard/praCard.vue'
	export default {
		data() {
			return {
				list: [],
				PersonalizedList: [],
			}
		},
		mounted() {
			getBanner().then(res => {
				this.list = res.data.banners
				// console.log(this.list)
			})
			getPersonalized().then(res => {
				this.PersonalizedList = res.data.result;
				// console.log(this.PersonalizedList);
			})
		},
		methods: {

		},
		components: {
			praCard,
		}
	}
</script>

<style lang="scss">
	.title {
		height: 40rpx;
		line-height: 65rpx;
		padding-top: 145rpx;
		font-size: 30rpx;
		padding-left: 14rpx;
		font-weight: 700;
	}

	.banner {
		width: 100%;
		height: 200rpx;
		background-color: #d44439;
	}

	swiper {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		top: 30rpx;
		margin: auto;
		border-radius: 15rpx;
	}

	swiper swiper-item {
		border-radius: 15rpx;
	}

	swiper image {
		width: 100%;
		height: 340rpx;
	}
</style>
